<template>
	<div>
		<h1>子:A组件</h1>
		<button @click="btn">按钮</button>
		<header>
			<div>头部</div>
			<slot name="x"></slot>
		</header>
		<section>
			<div>中间</div>
			<div v-for="item in list" :key="item.id"><slot :data="item"></slot></div>
		</section>

		<section>
			<div>动态插槽</div>
			<slot name="xxx"></slot>
		</section>
		<footer>
			<div>底部</div>
			<slot name="y"></slot>
		</footer>
	</div>
</template>

<!-- 兄弟传值子A==>父亲==>子B -->
<!-- <script setup>
let str = ref('这是A组件的数据');
const emit = defineEmits(['fn']);
const btn = () => {
	emit('fn', str); 
};
</script> -->

<!-- 兄弟直接传值 -->
<script setup>
import mitt from '@/plugins/Bus.js';
let str = ref('这是A组件的数据');
const btn = () => {
	mitt.emit('fn', str);
};

// 定义作用域插槽
let list = ref([{ id: 1, name: '张三', age: 18 }, { id: 2, name: '李四', age: 23 }, { id: 3, name: '王五', age: 20 }, { id: 4, name: '里斯', age: 19 }]);
</script>

<style></style>
